<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap创建</title>
    <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-xs-6 col-sm-6" style="background-color: #2aabd2;box-shadow:inset 2px -2px 2px #5cb85c,inset -2px 2px 2px #5cb85c;">
            <p>这是第一行第一列,使用Bootstrap框架。虽然还不太明白,但是请继续看下去。</p>
        </div>
        <div class="col-xs-6 col-sm-6" style="background-color: #5cb85c;box-shadow:inset 2px -2px 2px #2aabd2,inset -2px 2px 2px #2aabd2;">
            <p>这是第一行第二列,使用Bootstrap框架。虽然还不太明白,但是请继续看下去。</p>
        </div>
    </div>

    <div class="clearfix visible-xs"></div>

    <div class="row">
        <div class="col-xs-6 col-sm-6" style="background-color: #c7254e;box-shadow:inset 2px -2px 2px #9d9d9d,inset -2px 2px 2px #9d9d9d">
            <p>这是不知道第几行第几列,使用Bootstrap框架。虽然还不太明白,但是请继续看下去。</p>
        </div>
        <div class="col-xs-6 col-sm-6" style="background-color:#9d9d9d;box-shadow:inset 2px -2px 2px #9d9d9d,inset -2px 2px 2px #c7254e">
            <p>这是不知道第几行第几列,使用Bootstrap框架。虽然还不太明白,但是请继续看下去。</p>
        </div>
    </div>

    <div class="col-xs-6 col-xs-offset-3" style="background-color: #dedef8;box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicingelit.</p>
    </div>
</div>

<div class="container">
    <h1>Hello, world!</h1>
    <div class="row" >
        <div class="col-xs-6 col-xs-offset-3" style="background-color: #dedef8;box-shadow:
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing
                elit.
            </p>
        </div>
    </div>
</div>

<div class="container">
    <h1>Hello,world!</h1>
    <div class="row">
        <div class="col-md-6" style="background-color: #dedef8;box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <h4>第一列</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
    </div>
</div>

<div class="container">
    <h1>Hello,world!</h1>
    <div class="row">
        <div class="col-xs-3" style="background-color: #dedef8;box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <h4>第一列</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>

        <div class="col-xs-9" style="background-color: #dedef8;box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <h4>第二列 - 分为四个盒子</h4>
            <div class="row">
                <div class="col-xs-6" style="background-color: #B18904;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    <p>Consectetur art party Tonx culpa semiotics. Pinterest assumenda minim organic quis.</p>
                </div>
                <div class="col-xs-6" style="background-color: #B18904;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    <p> sed do eiusmod tempor incididunt ut labore et dolore magnaaliqua. Ut enim ad minim veniam, quis nostrud exercitationullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-6" style="background-color: #B18904;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    <p>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                </div>
                <div class="col-xs-6" style="background-color: #B18904;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.</p>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container">
    <h1>hello world!</h1>
    <div class="row">
        <p>排序前</p>
        <div class="col-xs-4" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            我在左边
        </div>
        <div class="col-xs-8" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            我在右边
        </div>
    </div>

    <div class="row">
        <div class="col-xs-4 col-xs-push-8" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            我在左边
        </div>
        <div class="col-xs-8 col-xs-pull-4" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            我在右边
        </div>
    </div>
</div>

<script src="jquery-3.2.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</body>
</html>